<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,inital-scale=1,user-scalable=no">
    <title>实战项目2</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="animate.css-master/animate.css" type="text/css">
    <link rel="stylesheet" href="zh.css" type="text/css">
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index_bootsystrap.html" class="navbar-brand">麦子学院</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#home">首页</a> </li>
                <li><a href="#bbs">论坛</a> </li>
                <li><a href="#html5">前端开发</a> </li>
                <li><a href="#course">最新教程</a> </li>
                <li><a href="#app">移动App</a> </li>
                <li><a href="#contact">联系我们</a> </li>
            </ul>
        </div>
    </div>
</nav>
<!--导航-->
<section id="home">
    <div class="lvjing ">
        <div class="container">
            <div class="row wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <h1>bootstrap实战课程</h1>
                    <p>本课程适用于：1 web开发人员 2 网站维护人员 3 管理人员<br>
                            培训的目标是 使用bootstrap建立网页格式开发web前段<br></p>
                    <img class="img-responsive" src="images/php.jpg" alt="php" >
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </div>
</section>
<section id="bbs">
    <div class="container" >
        <div class="row wow fadeInUp" data-wow-duration="0.5s">
            <div class="col-md-4">
                <a href="http://baidu.com">
                    <img class="img-responsive" src="images/an.jpg" alt="">
                    <h3>Android开发</h3>
                    <p>Android开发技术交流、问题求助、善战案例分享</p>
                </a>
            </div>
            <div class="col-md-4">
                 <a href="http://baidu.com">
                    <img class="img-responsive" src="images/apple.jpg" alt="" >
                    <h3>IOS开发</h3>
                    <p>IOS开发技术交流、问题求助、善战案例分享</p>
                 </a>
            </div>
            <div class="col-md-4">
                 <a href="http://baidu.com">
                    <img class="img-responsive img-circle"  src="images/qianru.jpg" alt="">
                    <h3>嵌入式开发</h3>
                    <p>嵌入式开发技术交流、问题求助、善战案例分享</p>
                 </a>
            </div>
        </div>
    </div>
</section>
<section id="html5">
    <div class="container">
        <div class="row">
            <div class="col-md-6 wow fadeInLeft">
                <h2>HTML5前端开发</h2>
                <p>一线资深前段工程师倾情打造；助你完成普通程序员到工程师的华丽升级</p>
                <div>

                    <p>
                        <span class="glyphicon glyphicon-grain maizi"></span>
                        使用html5和css3技术轻松实现设备表达展示。
                    </p>
                </div>
                <div>

                    <p>
                        <span class="glyphicon glyphicon-grain maizi"></span>
                        清晰明了的语义代码结构，更高的可读性，更利于网页维护的。
                    </p>
                </div>
            </div>
            <div class="col-md-6 wow fadeInRight" align="center" >
                <img   width="50%"  class="img-responsive" src="images/html5.jpg" alt="">
            </div>
        </div>
    </div>
</section>
<section id="bootstrap">
    <div class="container">
        <div class="row row wow fadeInUp" data-wow-duration="0.5s">
            <div class="col-md-6" align="center" >
                <img class="img-responsive" src="images/bootstrap.jpg" alt="">
            </div>
            <div class="col-md-6">
                <h2>bootstrap实战视频</h2>
                <p>一线资深前段工程师倾情打造；助你完成普通程序员到工程师的华丽升级</p>
                <div>
                    <p>
                        <span class="glyphicon glyphicon-grain maizi"></span>
                        你的网站应用能在bootstrap的设计在 同一编码在PC 手机和平板中应用。使用html5和css3技术轻松实现设备表达展示。
                    </p>
                </div>
                <div>

                    <p>
                        <span class="glyphicon glyphicon-grain maizi"></span>
                        bootstrap 提供了全面、美观的页面结构。清晰明了的语义代码结构，更高的可读性，更利于网页维护的。
                    </p>
                </div>
            </div>

        </div>
    </div>
</section>
<section id="course">
    <div class="container">
        <div class="row wow fadeIn" data-wow-delay="0.6s">
            <div class="col-md-12">
                <h2>最新课程</h2>
            </div>
            <div class="col-md-3">
                <div align="center">
                    <img class="img-responsive" src="images/course.jpg" width="150px">
                    <a><button type="button">学习课程</button></a>
                </div>
            </div>
            <div class="col-md-3">
                <div align="center">
                    <img class="img-responsive" src="images/course.jpg" width="150px">
                    <button type="button">学习课程</button>
                </div>
            </div>
            <div class="col-md-3">
                 <div align="center">
                    <img class="img-responsive" src="images/course.jpg" width="150px">
                    <button type="button">学习课程</button>
                </div>
            </div>
            <div class="col-md-3">
                 <div align="center">
                    <img class="img-responsive" src="images/course.jpg" width="150px">
                    <button type="button">学习课程</button>
                </div>
            </div>
            <div class="col-md-3">
                 <div align="center">
                    <img class="img-responsive" src="images/course.jpg" width="150px">
                    <button type="button">学习课程</button>
                </div>
            </div>
            <div class="col-md-3">
                 <div align="center">
                    <img class="img-responsive" src="images/course.jpg" width="150px">
                    <button type="button">学习课程</button>
                </div>
            </div>
            <div class="col-md-3">
                 <div align="center">
                    <img class="img-responsive" src="images/course.jpg" width="150px">
                    <button type="button">学习课程</button>
                </div>
            </div>
            <div class="col-md-3">
                 <div align="center">
                    <img class="img-responsive" src="images/course.jpg" width="150px">
                    <button type="button">学习课程</button>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="app">
    <div class="container">
        <div class="row wow fadeInUp">
            <div class="col-md-6">
                <h2>麦子学院移动APP下载</h2>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;麦子轩辕的APP随意下载 下载后可以随意学习Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受
                    欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,。</p>
                <button type="button">
                    <span class="glyphicon glyphicon-arrow-down"></span>
                    apple下载
                </button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button">
                    <span class="glyphicon glyphicon-arrow-down"></span>
                    Andoir下载
                </button>
            </div>
            <div class="col-md-6">
               <img class="img-responsive" src="images/book.jpg" alt="">
            </div>

        </div>
    </div>
</section>
<section id="contact">
    <div class="lvjing">
        <div class="row">
            <div class="col-md-6 wow fadeInLeft">
                <h2><span class="glyphicon glyphicon-send"></span>&nbsp;&nbsp;&nbsp; 联系麦子</h2></span>
                <p>百度地图API是一套为开发者提供的基于百度地图的应用程序接口,<br>包括JavaScript、iOS、Andriod、静态地图、
                    Web服务等多种版本,<br>提供基本地图、位置搜索、周边搜索、公交.</p><br>
                <address>
                    <p><span class="glyphicon glyphicon-home"></span>&nbsp;
                        北京市海淀区中国</p><br>
                    <p><span class="glyphicon glyphicon-phone-alt"></span>&nbsp;
                        联系电话：876655</p><br>
                    <p><span class="glyphicon glyphicon-envelope"></span>&nbsp;
                        9526666@qq.com</p>
                </address>
            </div>
            <div class="col-md-6 wow fadeInRight">
                <form action="#" method="post">
                    <div class="col-md-6">
                        <input type="text" class="form-control" placeholder="你的姓名">
                    </div>
                    <div class="col-md-6">
                        <input type="email" class="form-control" placeholder="你的邮箱">
                    </div>
                     <div class="col-md-12">
                        <input type="text" class="form-control" placeholder="标题">
                    </div>
                     <div class="col-md-12">
                        <textarea class="form-control" placeholder="留言内容"></textarea>
                    </div>
                    <div class="col-md-8">
                        <input type="submit" class="form-control"value="提交" >
                    </div>

                </form>
            </div>
        </div>
    </div>
</section>
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>校址: &nbsp;北京市海淀区学院路29号,100083&nbsp;电话:&nbsp;010-82322005</p>
            </div>
        </div>
    </div>
</footer>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/singlepagenav.jquery.js"></script>
<script src="WOW-1.1.2/dist/wow.min.js"></script>
<script>
    // 导航滑动到位
    $(function() {
        $('.nav').singlePageNav({
            offset: 70
        });
        // 小屏幕导航自动关闭
        $('.navbar-collapse a').click(function () {
            $('.navbar-collapse').collapse('hide');
        });
        new WOW().init();
    })
</script>
</body>
</html>